  

import { defineComponent } from 'vue'
import {
  TaskType,
  TASK_TYPES_MAP
} from '@/views/projects/task/constants/task-type'
import styles from './dag.module.scss'

export default defineComponent({
  name: 'workflow-dag-sidebar',
  emits: ['dragStart'],
  setup(props, context) {
    console.log('workflow-dag-sidebar')
    const allTaskTypes = Object.keys(TASK_TYPES_MAP).map((type) => ({
      type,
      ...TASK_TYPES_MAP[type as TaskType]
    }))
    console.log('allTaskTypes-->',allTaskTypes)


    return () => (
      <div class={styles.sidebar}>
        {allTaskTypes.map((task) => (
          <div
            class={[styles.draggable, `task-item-${task.type}`]}
            draggable='true'
            onDragstart={(e) => {
              context.emit('dragStart', e, task.type as TaskType)
            }}
          >
            <em
              class={[
                styles['sidebar-icon'],
                styles['icon-' + task.type.toLocaleLowerCase()]
              ]}
            />
            <span>{task.alias}</span>
          </div>
        ))}
      </div>
    )
  }
})
